<template>
  <!-- 图片管理区域 -->
  <div style="padding-bottom: 15px">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>图片管理</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="DialogimgForm = true"
          >添加图片</el-button
        >
      </div>
      <el-table :data="imgDate" style="width: 100%">
        <el-table-column label="编号" width="180" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.imgId }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标题" width="180" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.imgTitle }}</span>
          </template>
        </el-table-column>
        <el-table-column label="图片地址" width="180" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.imgUrl }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发布日期" width="280" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.imgDate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="评论" width="200" align="center">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.imgRemarks }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="imgEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="imgDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 增加图片弹出框 -->
    <el-dialog title="图片信息" :visible.sync="DialogimgForm">
      <el-form :model="imgForm">
        <el-form-item label="编号" :label-width="AllFormWidth">
          <el-input v-model="imgForm.imgId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标题" :label-width="AllFormWidth">
          <el-input v-model="imgForm.imgTitle" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="AllFormWidth">
          <el-input v-model="imgForm.imgUrl" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="发布日期" :label-width="AllFormWidth">
          <el-input v-model="imgForm.imgDate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="评论" :label-width="AllFormWidth">
          <el-input v-model="imgForm.imgRemarks" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="DialogimgForm = false">取 消</el-button>
        <el-button type="primary" @click="imgAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { request } from "../../network/request";
export default {
  name: "AdminImage",
  data() {
    return {
      // 所有弹出窗宽度
      AllFormWidth: "100px",
      // 日志数据
      imgDate: [],
      DialogimgForm: false,
      imgForm: {
        id: "",
        imgId: "",
        imgTitle: "",
        imgRemarks: "",
        imgDate: "",
        imgUrl: "",
      },
    };
  },
  created() {
    request({
      url: "admin/getimgpage",
      method: "GET",
    })
      .then((res) => {
        // console.log(res);
        if (res.data.code == "200") {
          this.imgDate = eval(res.data.msg);
          // console.log(this.imgDate);
        } else {
          console.log("获取失败!");
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    // 图片修改
    imgEdit(index, row) {
      this.$prompt("请输入内容", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          row.imgText = value;
          // this.LogDate[index].url = value;
          // request({
          //   url:'/admin/updatehomeindex',
          //   method:'PATCH',
          //   data: { username: this.forms.username, password: this.forms.password }
          // })
          // this.$message({
          //   type: "success",
          //   message: "修改成功",
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消修改",
          });
        });
    },
    // 图片删除
    imgDelete(index) {
      // console.log(index, row);
      request({
        url: "/admin/deleteimg",
        method: "POST",
        data: { id: this.imgDate[index]["id"] },
      })
        .then((res) => {
          this.imgDate.splice(index, 1);
          this.$message({
            type: "info",
            message: "删除成功",
          });
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 图片增加
    imgAdd() {
      this.DialogimgForm = false;
      this.imgDate.push(this.imgForm);
      console.log(this.imgForm);
      request({
        url: "/admin/addimg",
        method: "POST",
        data: { message: this.imgForm },
      })
        .then((res) => {
          console.log(res);
          this.imgForm = {
            imgId: "",
            imgTitle: "",
            imgRemarks: "",
            imgDate: "",
            imgUrl: "",
          };
          this.$message({
          message: '增添成功',
          type: 'success'
        });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>